<template>
    <div id="mine">
        <head-tip title="我的"></head-tip>
    	<div id="father-content">
            
            <section class="content">
                <div class="content-head">
                    <div class="content-head-up">
                        <a href="javascript:;" class="userpic"><img :src="userimg"><span>{{username}}</span></a>
                        <router-link class="link-item" to="/mine/erweima"><i class="iconfont icon-erweima wximgs" id="create-popup"></i></router-link>
                    </div>
                    <div class="content-head-down">
                        <router-link class="link-item" to="/trends"><span>{{userinfos==null||!userinfos.iartcount?0:userinfos.iartcount}}</span><span>动态</span></router-link>
                        <router-link class="link-item" to="/mine/follow"><span>{{userinfos==null||!userinfos.ifoccount?0:userinfos.ifoccount}}</span><span>关注</span></router-link>
                        <router-link class="link-item" to="/mine/followMe"><span>{{userinfos==null||!userinfos.ibfoccount?0:userinfos.ibfoccount}}</span><span>粉丝</span></router-link>
                    </div>
                </div>
                <div class="content-body">
                    <ul class="items">
                        <li v-for="(item,index) in items" :key="index" v-show="arr.indexOf(index)!=-1" @click="toUrl(item.path)" v-bind:class="{space:index==5}">
                            
                                <span class="iconbg" v-bind:class="{iconyl:index>=5}">
                                    <i v-bind:class="item.icon"></i>
                                </span>
                                
                                    <div class="link-item link-item-down">
                                        <el-badge v-if="getNewData().indexOf(item.itype)>-1" :value="arrDetail[item.itype]" class="item">
                                            <span>{{item.name}}</span>
                                        </el-badge>
                                        <span v-else>{{item.name}}</span>
                                        <i class="iconfont icon-you"></i>
                                    </div>
                                    
                        </li>
                    </ul>
                </div>
                <el-button type="text" @click="dialogVisible = true" class="logout">退出登录</el-button>
                <el-dialog
                    id="tosure"
                    :visible.sync="dialogVisible"
                    width="80%"
                    style="margin-top:15vh">
                    <span>您确定要退出登录吗？</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="out">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- <p class="logout">退出登录</p> -->
            </section>
        </div>
        <foot></foot>  
    </div>
</template>

<script>

import foot from '@/components/common/foot'
import headTip from '@/components/common/head'
import {mineList} from '@/params/mineList'
import {footNav} from '@/params/foot'
import '@/assets/iconfontMine/iconfont.css'
import {isCreateCard} from '../../js/dataServe.js'
import {logout} from '../../config/common.js'
import {fetchLogin} from '../../config/fetch.js'
export default {

    async beforeRouteEnter(to,from,next){
        if(!sessionStorage.userinfos){
            let responseData = fetchLogin('/user/ssoLogin.shtml?sessionid='+sessionStorage.sid,{},'POST');
            await responseData.then((res)=>{
                                if(res.result==1){
                                    let headimg=res.data.user.cheadimage;
                                    if(headimg.indexOf('http:')==-1){
                                        headimg=decodeURIComponent(headimg);
                                    }
                                    sessionStorage.setItem('uimg',headimg);
                                    sessionStorage.setItem('username',res.data.user.crealname);
                                    let infostring=JSON.stringify(res.data.infos);
                                    sessionStorage.setItem('userinfos',infostring);
                                }
                            })
        }
        next()
    },
    data(){
        return {
            arrDetail:[],
            personCards:[],
            companyCards:[],
            uimg:sessionStorage.uimg,
            username:decodeURIComponent(sessionStorage.username),
            items:mineList,
            dialogVisible:false,
            arr:[0,1,2,3,4,5,6,7,8,9,10,11,12],
            userinfos:{}
        }
    },
    computed:{
        userimg(){
            if(this.uimg.indexOf('http')!=-1){
                return this.uimg
            }else{
                return 'http://card.adouyun.com/CloudCard/'+this.uimg
            }
           
        }
    },
    components:{
    	foot,
        headTip
    },
    mounted(){
        this.userinfos = JSON.parse(sessionStorage.userinfos)
        // console.log(this.userinfos)
        //是否创建名帖
        if(sessionStorage.sid){
            let self = this;
            let responseData = isCreateCard();
            responseData.then((res)=>{
                                        if(res.result!=1){
                                            self.arr = [0,4,5,6,7,8,9,10,11]
                                        }else if(res.result == 1){
                                            let lists = res.data.reverse();
                                            // console.log(lists)
                                            lists.forEach( (item,key) => {
                                                if(item.itype==1){
                                                    self.personCards.push(item)
                                                }else{
                                                    self.companyCards.push(item)
                                                }
                                                if(this.$store.state.allCards.length<=0){
                                                    this.$store.commit('changeAllCards',{val:lists});
                                                }
                                                
                                            })
                                            this.$store.commit('changeCards',{val:self.personCards});
                                            this.$store.commit('changeCcards',{val:self.companyCards});
                                        }
                                    })
        }
    },
    methods:{
        //退出登录
        out() {
            this.dialogVisible = false
            let responseData = logout();
            responseData.then((res)=>{
                                    if(res.result==1){
                                        sessionStorage.clear();
                                        localStorage.clear();
                                        window.location.href = '/mine'
                                    }
            })
        },
        getNewData(){
            var arrs = [];
            this.$store.state.newData.forEach((v,k)=>{
                arrs.push(v.itype);
                this.arrDetail[v.itype] = v.icount;
            })
            return arrs;
        },
        toUrl(path){
            this.$router.push({path:path.path,query:{type:3}})
        }
    }  

}
</script>

<style scoped >
#mine {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background: #EBEEF5;
    padding-bottom: 2rem;
}
#create-popup{
    font-size:3rem;
}
.content-head{
    background: #ffffff;
}
.content{
    padding: 3rem 0 3.5rem 0;
}
.content-head{
    margin-bottom:1rem;
}
.content-head-up{
    padding: 1rem 0; 
    height: 5rem;
    display: flex;
    align-items:center;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
}
.content-head-up i,.content-head-up a{
    width:33.333333%;
    align-items: center;
}
.userpic{
    display: flex;
    flex-direction:column;
}
.userpic span{
    padding-top: 0.5rem;
}
.content-head-up .userpic img{
    width: 4rem;
    border-radius:2rem;
}
.content-head-down{
    height: 5rem;
    display: flex;
    justify-content: space-around;
    align-items:center;
}
.content-head-down a{
    display: block;
    width: 33.33333%;
    display: flex;
    flex-direction: column;
}
.content-body li{
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #EBEEF5;
    font-size: 1rem;
    display: flex;
    padding: 0 0.5rem;
    background: #ffffff;
}
.items{
    background: #EBEEF5;
}
.iconbg{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: #00AA76;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 0.2rem;
    margin-top: .75rem;
    margin-right: 1rem;
    box-sizing: border-box;
}
.iconyl{
    background: #F6B658;
}
.iconbg .iconfont{
    font-size: 1rem;
    color:#ffffff;
}
.space{
    margin-top: 1rem;
}
.logout{
    height: 3rem;
    line-height: 3rem;
    margin-top: 1rem;
    background: #ffffff;
    color:#F56C6C;
    width: 100%;
    display: block;
    padding: 0;
    font-size: 1rem;
    display: none;
}
.link-item-down{
    width: 100%;
    text-align:left;
    position: relative;
    color:#333333;
}
.link-item-down i{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 3rem;
    font-size: 1rem;
}
#tosure .el-dialog{
    margin: 0 auto;
}
#tosure .el-dialog__header {
    padding: 20px 20px 10px;
    text-align: left;
}
#tosure .el-dialog__header span{
    font-size: 1.2rem;
}
#tosure .el-dialog__body span{
    font-size: 1rem;
}
#tosure .el-dialog__footer button span{
    font-size: 0.9rem;
}

</style>
